<template>
  <div class="app">
    <h1>{{msg}},学生姓名是：{{studentName}}</h1>
    <!--    通过父组件给子组件传递函数类型的props实现：子给父传递数据-->
    <School :getSchoolName="getSchoolName"></School>
    <!--    通过父组件给子组件绑定一个自定义组件：子给父传递数据(使用@或v-on)-->
<!--    <Student v-on:atguigu="getStudentName"/>-->
<!--    <Student @atguigu="getStudentName" @demo="m1"/>-->
    <!--    通过父组件给子组件绑定一个自定义组件：子给父传递数据（使用ref）-->
    <Student ref="student" @click.native="show"/>
  </div>
</template>

<script>
import Student from './components/Student'
import School from './components/School'
export default {
  name:'App',
  components:{
    Student,
    School
  },
  data(){
    return{
      msg:"你好啊！",
      studentName:'',
    }
  },
  methods:{
    getSchoolName(name){
      console.log('App收到了学校名：',name)
    },
    getStudentName(name,...params){
      console.log("App收到了学生名:",name,params);
      this.studentName = name ;

    },
    m1(){
      console.log("demo事件触发了")
    },
    show(){
      console.log("123");
    }
  },
  mounted() {
    //绑定自定义事件
    //二参数写成箭头函数也可以
    this.$refs.student.$on('atguigu',(name,...params)=>{
      console.log("App收到了学生名:",name,params);
      this.studentName = name ;
    })
    //this.$refs.student.$on('atguigu',this.getStudentName)
    //绑定自定义事件，事件只触发一次
    //this.$refs.student.$once('atguigu',this.getStudentName)
  }

}
</script>
<style lang="less" scoped>
.app{
  background-color: gray;
  padding: 5px;
}
</style>
